<template>
  <div>

    <!-- 标题 -->
    <div class="titles">
      <h2>学习成果认定查询信息</h2>
      <span>选修课学分：{{ user.credit }}</span>
      <span>成果累计积分：{{ user.scores }}</span>
    </div>
    <hr class="underline">

    <!-- 头部条件查询 -->
    <div class="query  " id="margins">
      类别：
      <el-select v-model="value" placeholder="请选择">
        <el-option label="全部数据" value="">
        </el-option>
        <el-option v-for="item in achTypeAll" :key="item.type_id" :label="item.type_name" :value="item.type_id">
        </el-option>
      </el-select>
      <el-button type="primary" class="querybt" @click="querybt">查询</el-button>
    </div>

    <!-- 数据表格 -->
    <div class="tables " id="margins">
      <el-table :data="tData" highlight-current-row border>
        <el-table-column type="index" width="50" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="s_number" label="学号" align="center">
        </el-table-column>
        <el-table-column prop="achievement_type.type_name" label="类别" align="center">
        </el-table-column>
        <el-table-column prop="describe" label="描述" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="subTime" label="提交日期" align="center" :formatter="formatSubTime">
        </el-table-column>
        <el-table-column prop="reviewTime" label="审核时间" align="center" :formatter="formatSubTime">
        </el-table-column>
        <el-table-column prop="t_number" label="审核人" align="center">
          <template slot-scope="scope">
            <span v-if="!scope.row.t_number" style="color: #ccc;">审批中</span>
            <span v-else>{{ scope.row.t_number }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="scores" label="成果积分" align="center">
        </el-table-column>
        <el-table-column prop="reason" label="驳回理由" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.outcome == 0">{{ scope.row.reason }}</span>
              <span v-else-if="scope.row.outcome == 1" style="color:#ccc;">暂无</span>
              <span v-else-if="scope.row.outcome == 2" style="color:#ccc;">已通过</span>
            </template>
          </el-table-column>
        <el-table-column prop="outcome" label="审核结果" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.outcome == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
            <span v-else-if="scope.row.outcome == 1">审批中</span>
            <span v-else-if="scope.row.outcome == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页封装 -->
      <Pagination :datas="queryData" @pageChange="pageChange"></Pagination>




    </div>
  </div>
</template>

<script>
import { achievement, achievementType } from "@/api/student/achievementAPI"
import { getInfo } from "@/api/user"
import Pagination from '@/components/Pagination/pagination.vue'
export default {
  name: "resultsQuery",
  components: {
    // 分页组件
    Pagination
  },
  data() {
    return {
      //用户信息
      user: {},
      // 源表数据
      tableData: [
      ],

      // 查询后得数据
      queryData: [],

      // 分页之后的表格数据
      tData: [],




      // 成果类别 查询项数据
      achTypeAll: [],
      // 类别 值
      value: '',

    };
  },
  created() {
    this.users()
  },
  methods: {
    // 用户信息
    users() {
      getInfo().then(res => {
        this.user = res.data;
        this.datas();
      })
    },

    // 表格数据
    datas() {
      const table = {
        s_number: this.user.username,
        status: 0
      }
      achievement(table).then(res => {
        this.tableData = res.data;
        console.log(res.data);
        this.achType(); // 获取查询类别
      })


    },

    // 成果分类表数据
    achType() {
      achievementType().then(res => {
        this.achTypeAll = res.data
        // console.log("achTypeAll", this.achTypeAll);
        this.querybt(); // 赋值数据
      })
    },

    //分页 
    pageChange(data) {
      this.tData = data
      console.log("data", this.tData);
    },

    //提取日期
    formatSubTime(row) {
      return row.subTime.substring(0, 10);
    },

    // 查询按钮
    querybt() {

      if (this.value) {
        this.queryData = this.tableData.filter(item => item.achieve_type == this.value)
      } else {
        this.queryData = this.tableData
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/* 头部查询样式 */
.query {
  margin: 20px;

  .querybt {
    margin-left: 10px;
  }
}

.tables {
  margin: 0 20px 20px 20px;
}
</style>